/**
 * @desc 学员统计
 */
<template>
    <view class="total">
        <nut-noticebar :text="`当前学员数量${personList.length}人！`" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
        </nut-noticebar>
        <nut-searchbar label="学员姓名" v-model="searchValue" clearable @search="search"></nut-searchbar>
        <view class="total-list" v-if="personList.length">
            <view class="total-list-person" v-for="item in personList" :key="item._id" @click="goDetail(item._id)">
                <nut-avatar size="normal" :icon="item.avatarUrl">
                </nut-avatar>
                <text class="total-list-person-text">{{ item.name || item.nickName }} ({{ `C${item.type}` }})</text>
            </view>
        </view>
        <nut-empty v-else description="无数据"></nut-empty>
    </view>
</template>

<script>

import { reactive, toRefs, } from 'vue';
import db from '../../server/index';
import Taro from '@tarojs/taro';
export default {
    name: 'Total',
    data() {
        return {
            personList: [],
            list: [],
            searchValue: '',
            coachId: ''
        }
    },
    onPullDownRefresh() {
        Taro.showLoading({
            title: '加载中',
        })
        this.init()
    },
    created() {
        db.collection('coach').where({
            openid: Taro.getStorageSync('openid')
        }).get().then(({ data = [] }) => {
            this.coachId = data[0]._id
            this.init()
        })
    },
    methods: {
        init() {
            db.collection('phone').where({
                coachId: this.coachId,
            }).get().then(({ data = [] }) => {
                this.list = data
                this.personList = data
                Taro.stopPullDownRefresh();
                Taro.hideLoading();
            })
        },
        search() {
            if (!this.searchValue) {
                this.personList = this.list
                return
            }
            this.personList = this.list.filter(item => {
                if ((item.name && item.name.includes(this.searchValue)) || (item.nickName && item.nickName.includes(this.searchValue))) {
                    return true
                }
                return false
            })
        },
        goDetail(id) {
            Taro.navigateTo({ url: '/pages/detail/index?id=' + id })
        }
    }
}
</script>

<style lang="less">
.total {
    &-list {
        &-person {
            display: flex;
            height: 50px;
            align-items: center;
            padding: 0 8px;
            border-bottom: 1px solid rgb(236, 235, 235);

            &-text {
                margin-left: 10px;
            }
        }
    }
}
</style>
